<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <style>
        table {
            width: 700px;
            margin: 50px auto;
            text-align: center;
        }

        table,
        th,
        td {
            border: 1px solid #ccc;
            border-collapse: collapse;
        }

        th,
        td {
            padding: 10px;
        }

        /* .total {
            float: right;
        } */
    </style>
</head>

<body>
    <div id='app'>
        <table>
            <tr>
                <th>
                    <input type="checkbox"><span>全选/全不选</span>
                </th>
                <th v-for="item in titles">
                    {{ item }}
                </th>
            </tr>
            <tr v-for="item,index in books">
                <td>
                    <!-- {{ index }} -->
                    <input type="checkbox" :checked="item.checkbox" @click="isCheck(item)">
                </td>
                <td>{{ item.name}}</td>
                <td>{{ item.date}}</td>
                <td>{{ item.price.toFixed(2)}}</td>
                <td>
                    <button @click="reduce(index)">-</button>
                    {{ item.num }}
                    <button @click="add(index)">+</button>
                </td>
                <td><button @click="del(index)">移除</button></td>
            </tr>
            <tr class="total">
                <td colspan="6">总价是:{{total.toFixed(2)}}元</td>
            </tr>
        </table>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                titles: ['书籍名称', '出版日期', '价格', '数量', '操作'],
                books: [
                    {
                        checkbox: false,
                        name: '算法导论',
                        date: '2006-9',
                        price: 85,
                        num: 1
                    },
                    {
                        checkbox: true,
                        name: 'UNIX编程艺术',
                        date: '2006-2',
                        price: 59,
                        num: 1
                    },
                    {
                        checkbox: false,
                        name: 'Vue程序设计',
                        date: '2008-10',
                        price: 35,
                        num: 1
                    },
                    {
                        checkbox: false,
                        name: '颈椎康复',
                        date: '2006-3',
                        price: 129,
                        num: 1
                    },
                ],
            },
            computed: {
                // 接受
                total() {
                    var all = this.books.reduce((pre, item) => {
                        if (item.checkbox) {
                            return pre + item.price * item.num
                        } else {
                            return pre
                        }
                    }, 0)
                    return all
                }
            },
            methods: {
                // 单选框
                isCheck(item) {
                    // 修改数组里的值
                    console.log(item.checkbox);
                },
                add(i) {
                    this.books[i].num++
                },
                reduce(i) {
                    // 判断这个num是不是>1
                    if (this.books[i].num > 1) {
                        this.books[i].num--
                    }
                },
                // 删除
                del(i) {
                    this.books.splice(i, 1)
                }
            }
        })
    </script>
</body>

</html>